<template>
  <el-dialog
    :visible.sync="visible"
    custom-class="choose-dialog"
    title="选择身份体验"
    :show="show"
    width="350px"
    center
    :show-close="false"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @close="OnClose">
    <el-card class="box-card" shadow="hover">
      <div class="choose-item" @click="OnClose">
        <i class="el-icon-my-free"></i>
        <div class="content">
          <div class="title">功能查看</div>
          <div class="desc">试用功能效果</div>
        </div>
        <i class="el-icon-my-right"></i>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div class="choose-item" @click="singlePay">
        <i class="el-icon-my-single"></i>
        <div class="content">
          <div class="title">单次使用</div>
          <div class="desc">购买单次/新用户优享</div>
        </div>
        <i class="el-icon-my-right"></i>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div class="choose-item" @click="vipPay">
        <i class="el-icon-my-vip"></i>
        <div class="content">
          <div class="title">成为VIP</div>
          <div class="desc">购买会员包月使用</div>
        </div>
        <i class="el-icon-my-right"></i>
      </div>
    </el-card>

  </el-dialog>
</template>

<script>
  export default {
    name: 'TemplateDialog',
    props: {
      show: { type: Boolean, default: false }
    },
    data() {
      return {
        visible: this.show
      }
    },
    watch: {
      show: {
        immediate: true,
        handler(show) {
          this.visible = this.show
        }
      }
    },
    methods: {
      OnClose() {
        this.$emit('update:show', false)
      },
      singlePay() {
        this.OnClose()
        this.$router.push({name:'mine', params:{activeName: 'second'}})
      },
      vipPay() {
        this.OnClose()
        this.$router.push({name:'mine', params:{activeName: 'second'}})
      },
    }
  }
</script>

<style lang="scss" scoped>

  /*组件样式*/
  .el-dialog--center .el-dialog__body {
    padding: 5px 25px 25px 30px;
  }
  .el-card{
    margin-bottom: 10px;
    background: #F7F7FA;
    .el-card__body{
      padding: 0;
    }
  }

  /*ivon 图标样式*/
  .el-icon-my-free {
    width: 50px;
    background: url("../../assets/img/mianfei.png") center no-repeat;
    background-size: 50px;
    line-height: 50px;
    margin-right: 16px;
  }
  .el-icon-my-free:before {
    content: "替";
    visibility: hidden;
  }
  .el-icon-my-single{
    width: 50px;
    background: url("../../assets/img/danci.png") center no-repeat;
    background-size: 50px;
    line-height: 50px;
    margin-right: 16px;
  }
  .el-icon-my-single:before {
    content: "替";
    visibility: hidden;
  }
  .el-icon-my-vip{
    width: 50px;
    background: url("../../assets/img/VIP.png") center no-repeat;
    background-size: 50px;
    line-height: 50px;
    margin-right: 16px;
  }
  .el-icon-my-vip:before {
    content: "替";
    visibility: hidden;
  }
  .el-icon-my-right{
    width: 25px;
    background: url("../../assets/img/right.png") center no-repeat;
    background-size: 25px;
    line-height: 25px;
    margin-right: 5px;
  }
  .el-icon-my-free:before {
    content: "替";
    visibility: hidden;
  }

  /*页面样式*/
  .box-card{
    .choose-item{
      display: flex;
      width: 87%;
      padding: 20px;
      .content{
        padding-left: 5%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        .title{
          font-size: 20px;
          line-height: 25px;
        }
        .desc{
          font-size: 14px;
          line-height: 25px
        }
      }
    }
  }

</style>
